<template>
  <a-modal
    v-model:visible="dialogVisible"
    title="添加子节点"
    title-align="start"
    ok-text="保存"
    @cancel="handleCancel"
    @before-ok="handleSubmit"
    modal-class="formModal"
    :mask-closable="false"
  >
    <a-form ref="ruleFormRef" :model="ruleForm" style="height: 320px">
      <a-form-item field="nodeName" label="节点名称">
        <a-input v-model="ruleForm.nodeName" placeholder="请输入节点名称" />
      </a-form-item>
      <a-form-item field="nodeCode" label="编号">
        <a-input v-model="ruleForm.nodeCode" placeholder="请输入编号" />
      </a-form-item>
      <a-form-item field="color" label="颜色">
        <input type="color" v-model="ruleForm.color" id="colorWell" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script setup>
import { apiHome } from '@/api/healthAssessment'
import { Message } from '@arco-design/web-vue'
import { ref, reactive, defineExpose, defineEmits } from 'vue'
const emit = defineEmits(['funRefreshNode', 'hideRightMent'])
const dialogVisible = ref(false) // 弹框 添加子节点
const ruleFormRef = ref()
const ruleForm = reactive({
  id: null,
  noedName: '',
  nodeCode: '',
  color: '#00c7ef',
  parentId: ''
})
// 显示弹框
const funShowModal = (id) => {
  dialogVisible.value = true
  ruleForm.parentId = id
  emit('hideRightMent')
  getNodeBaseInfo()
}
// 获取基本信息
const getNodeBaseInfo = () => {
  apiHome.getNodeBaseInfo(ruleForm.parentId).then((res) => {
    if (+res.code === 200) {
      ruleForm.color = res.data.color
    }
  })
}
// 提交
const handleSubmit = (done) => {
  if (!ruleForm.nodeName) {
    ruleFormRef.value.setFields({
      nodeName: {
        status: 'error',
        message: '请输入节点名称'
      }
    })
    done(false)
    return false
  }
  if (!ruleForm.nodeCode) {
    ruleFormRef.value.setFields({
      nodeCode: {
        status: 'error',
        message: '请输入编号'
      }
    })
    done(false)
    return false
  }
  apiHome
    .getPortraitAdd(ruleForm)
    .then((res) => {
      if (res.code === 200) {
        Message.success('添加成功！')
        done()
        emit('funRefreshNode')
        handleCancel()
      } else {
        Message.error(res.message)
      }
      done(false)
    })
    .catch(() => {
      done(false)
    })
}
// 添加节点 弹框取消
const handleCancel = () => {
  ruleFormRef.value.resetFields()
  dialogVisible.value = false
}
defineExpose({
  funShowModal
})
</script>
<style lang="less" scoped></style>
